<template>
	<view>
		<u-navbar title="提现" bgColor="#fff" :autoBack="true" placeholder
			titleStyle="font-size:34rpx;font-weight:500;color:#000000;">
		</u-navbar>
		<view class="p10">
			<view class="br-16 bg-fff py-16 px-20">
				<view class="flex-align">
					<view class="fs-14 fw-500 lh-2 color-333 flex-1">提现到</view>
					<image src="/static/image/wx-icon.png" mode="aspectFill" class="wx-icon"></image>
					<view class="fw-400 fs-14 lh-2 color-333 ps-8">微信账户</view>
				</view>
				<view class="fs-14 fw-500 lh-2 color-333 mt-16">提现金额</view>
				<view class="input-box flex pt-40 pb-8">
					<view class="pe-8 fw-400 fs-24 color-333">¥</view>
					<input type="digit" v-model="money" placeholder="请输入充值金额" placeholder-class="input-css" />
				</view>
				<view class="flex-align pt-16">
					<view class="fs-14 fw-500 lh-2 color-333 flex-1">可提现金额:￥{{balance || '0.00'}}</view>
					<view class="fw-400 fs-14 lh-2 color-333 ps-8" @click="allMoney">全部提现</view>
				</view>
			</view>
		</view>
		<view class="footer bg-fff px-10 pt-8 flex-align"
			:style="{paddingBottom:`${$f.sys().safeAreaBottom ? $f.sys().safeAreaBottom : 10}px`}">
			<u-button text="确认提现" @click="$u.debounce(subumit,500,true)"
				:customStyle="`background-color: #24C98F;color:#fff`"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				money: '',
				balance: 0
			}
		},
		onShow() {
			this.getAccountInfo();
		},
		methods: {
			//全部提现
			allMoney() {
				if (!this.balance || this.balance == '0') return this.$f.msg('提现余额不足');
				this.money = this.balance;
			},
			// 获取账户信息
			getAccountInfo() {
				this.$api.get({
					url: '/companion/updateInfo/account-info',
					success: res => {
						this.balance = res.accountBalance;
					}
				});
			},
			subumit() {
				this.money = uni.$u.trim(this.money, 'all');
				if (!this.money) return this.$f.msg('请先输入提现金额');
				if (!uni.$u.test.amount(this.money)) {
					this.money = '';
					return this.$f.msg('请输入正确的金额')
				}
				if (!uni.$u.test.range(Number(this.money), [0.1, 200])) {
					this.money = '';
					return this.$f.msg(`提现金额范围${0.1}-${200}`)
				}
				if (this.money > this.balance) {
					return this.$f.msg(`提现金额不足`);
					this.money = '';
				}
				this.$api.post({
					url: '/uni/withdraw',
					loadingTip: '加载中...',
					data: {
						withdrawAmount: this.money,
					},
					success: res => {
						console.log('获取支付参数成功', res)
						uni.redirectTo({
							url: `/pages/mine/success?moeny=${this.money}`
						})
					},
					fail: err => {

					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F4F4F4;
	}

	.input-box {
		border-bottom: 1px solid #F9F8F6;

		.input-css {
			font-weight: 400;
			font-size: 32rpx;
			color: #999999;
		}

		input {
			font-size: 32rpx;
		}
	}

	.wx-icon {
		width: 48rpx;
		height: 48rpx;
	}

	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		border-top: 1px solid #0000000D;
		backdrop-filter: blur(4px);
	}
</style>